<template>
  <div>
    <el-button @click="add" type="primary" v-if="certStage === 2">新增类目</el-button>
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column label="序号" width="180" type="index"> </el-table-column>
      <el-table-column prop="investigateContent" label="考察项目">
      </el-table-column>
      <el-table-column prop="investigateProject" label="考察内容">
      </el-table-column>
      <el-table-column label="操作" v-if="isSubmit">
        <template slot-scope="scope">
          <el-button type="text" @click="getCertInfo(scope.row.id, false)"
            >编辑</el-button
          >
          <el-button type="text" @click="getCertInfo(scope.row.id, true)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="考察项目" prop="investigateContent">
          <el-col :span="10">
            <el-input v-model="formData.investigateContent" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="考察内容" prop="investigateProject">
          <el-col :span="10">
            <el-input v-model="formData.investigateProject" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="上传内容" prop="content">
          <ossUpload @setCertAttachmentId="setCertAttachmentId" ref="ossRef" :isdisabled="isEdit"></ossUpload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" v-if="!isEdit">取 消</el-button>
        <el-button type="primary" @click="save" v-if="!isEdit">
          {{ isEdit ? "提交修改" : "保存" }}
        </el-button>
      </span>
    </el-dialog>
    <el-pagination
      v-if="tableData.length > 0 && isSubmit"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-row type="flex" justify="center" style="margin-top:20px">
        <el-col :span="4">
         <el-button @click="submit" type="primary" class="submitBtn" v-if="certStage === 2">提 交</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import ossUpload from "../../../components/ossUpload.vue"
export default {
  components: {
    ossUpload
  },
  data() {
    return {
      tableData: [],
      formData: {
        certAttachmentId: 1,
        id: 0,
        investigateContent: "", // 考察内容
        investigateProject: "" // 考察项目
      },
      dialogVisible: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      isEdit: false,
      isSubmit: false,
      rules: {
        investigateContent: [{ required: true, message: '请输入考察项目', trigger: 'blur' }],
        investigateProject: [{ required: true, message: '请输入考察内容', trigger: 'blur' }]
      },
      totalPage: 0
    };
  },
  props: {
    certStatus: '',
    active: '',
    certStage: ''
  },
  created() {
    this.getCert();
  },
  methods: {
    // 每页数
      sizeChangeHandle (val) {
        this.page.pageSize = val
        this.page.pageNum = 1
        this.getCert()
      },
      // 当前页
      currentChangeHandle (val) {
        this.page.pageNum = val
        this.getCert()
      },
    add() {
      this.$nextTick(()=> {
          this.$refs.ossRef.clearFiles()
        })
      this.dialogVisible = true;
    },
    cancel() {
      Object.keys(this.formData).forEach(key => (this.formData[key] = ""));
      this.dialogVisible = false;
    },
    setCertAttachmentId(val) {
      this.formData.certAttachmentId = val
    },
    save() {
      if (!this.isSubmit) {
        this.tableData.push(this.formData);
        this.formData = {
          certAttachmentId: 1,
          id: 0,
          investigateContent: "", // 考察内容
          investigateProject: "" // 考察项目
        };
        this.$nextTick(()=> {
          this.$refs.ossRef.clearFiles()
        })
        this.dialogVisible = false;
      } else {
        this.$http({
          url: this.$http.cert("/invest"),
          method: "put",
          data: this.$http.adornData(
            {
              ...this.formData
            },
            false
          )
        })
          .then(() => {
            this.getCert();
            this.$emit('getCertStatus')
            this.isSubmit = true;
            this.isEdit = false;
            this.$message.success("修改成功");
            this.dialogVisible = false;
          })
          .catch(() => {
            this.$message.error("修改失败");
          });
      }
    },
    // 提交按钮
    submit() {
      this.$http({
        url: this.$http.cert("/invest"),
        method: "post",
        data: this.$http.adornData(this.tableData, false)
      })
        .then(() => {
          this.getCert();
          this.$emit('getCertStatus')
          this.isSubmit = true;
          this.$message.success("添加项目成功");
          this.dialogVisible = false;
        })
        .catch(() => {
          this.$message.error("添加项目失败");
        });
    },
    // 查看详情
    getCertInfo(id, val) {
      this.isEdit = val;
      this.$http({
        url: this.$http.cert(`/invest/${id}`),
        method: "get"
      }).then(res => {
        this.formData = res.data.data;
        this.$nextTick(()=> {
          this.$refs.ossRef.getUrl(this.formData.certAttachmentId)
        })
        this.dialogVisible = true;
      });
    },
    // 获取该页数据
    getCert() {
      this.$http({
        url: this.$http.cert("/investPage"),
        method: "get",
        params: this.$http.adornParams(
          {
            ...this.page,
            certId: this.$store.state.user.certId
          },
          false
        )
      }).then(res => {
        if (res.data.data.records.length) this.isSubmit = true;
        this.totalPage = res.data.data.total
        this.tableData = res.data.data.records;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.submitBtn {
  margin-top: 20px;
}
</style>
